<!DOCTYPE html>
<html ng-app="fishconfig">

<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>fish shell configuration</title>
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" type="text/css" href="fishconfig.css" />
    <link rel="stylesheet" type="text/css" media="print" href="fishconfig_print.css">
    <script type="text/javascript" src="js/colorutils.js" defer></script>
    <script type="text/javascript" src="js/main.js" defer></script>
    <script type="text/javascript" src="js/alpine.js" defer></script>
</head>

<!-- TODO check that every x-for has a :key binding -->
<!-- TODO check that every template has single child -->
<!-- TODO try to reduce depth by either splitting routes or eliminating redundant wrappers -->

<body id="ancestor" x-data="{ currentTab: 'colors' }">
    <main id="parent">
        <div id="tab_parent">
            <a :class="{'tab': true, 'selected_tab': currentTab =='colors'}" id="tab_colors"
                @click="currentTab = 'colors'">colors</a>
            <a :class="{'tab': true, 'selected_tab': currentTab == 'prompt'}" id="tab_prompt"
                @click="currentTab = 'prompt'">prompt</a>
            <a :class="{'tab': true, 'selected_tab': currentTab == 'functions'}" id="tab_functions"
                @click="currentTab = 'functions'">functions</a>
            <a :class="{'tab': true, 'selected_tab': currentTab == 'variables'}" id="tab_variables"
                @click="currentTab = 'variables'">variables</a>
            <a :class="{'tab': true, 'selected_tab': currentTab == 'history'}" id="tab_history"
                @click="currentTab = 'history'">history</a>
            <a :class="{'tab': true, 'selected_tab': currentTab == 'bindings'}" id="tab_bindings"
                @click="currentTab = 'bindings'"><span class="print_only">fish shell </span>bindings</a>
        </div>
        <div id="tab_contents">
            <template x-if="currentTab === 'colors'" x-data="colors">
                <div>
                    <!-- ko with: color_picker -->
                    <div class="colorpicker_text_sample" :style="{'background-color': terminalBackgroundColor}">
                        <span style="position: absolute; left: 10px; top: 3px"
                            :style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}"
                            x-text="selectedColorScheme.name"></span>
                        <br />
                        <div class="color_picker_background_cells">
                            <span style="display: block; text-align: right; line-height: 110%"
                                :style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}">
                                Background Color:<br />(demo only)&nbsp;
                            </span>
                            <template x-for="color in sampleTerminalBackgroundColors">
                                <label :style="{'background-color': color}">
                                    <input type="radio" :value="color" x-model="terminalBackgroundColor" hidden
                                        :title="'Preview with this background color.\n\nfish cannot change the background color of your terminal. Refer to your terminal settings to set its background color.'">
                                    </input>
                                </label>
                            </template>
                        </div>
                        <!-- This is the sample text -->
                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.command)}"
                            @click="selectColorSetting('command')">/bright/vixens</span>
                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'param'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.param)}"
                            @click="selectColorSetting('param')">jump</span>
                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.end)}"
                            @click="selectColorSetting('end')">|</span>
                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.command)}"
                            @click="selectColorSetting('command')">dozy</span>
                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'quote'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.quote)}"
                            @click="selectColorSetting('quote')"> "fowl"</span>
                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'redirection'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.redirection)}"
                            @click="selectColorSetting('redirection')">&gt; quack</span>
                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.end)}"
                            @click="selectColorSetting('end')">&</span>
                        <br>

                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.command)}"
                            @click="selectColorSetting('command')">echo</span>

                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'error'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.error)}"
                            @click="selectColorSetting('error')">'</span><span
                            :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'quote'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.quote)}"
                            @click="selectColorSetting('quote')">Errors are the portals to discovery</span>

                        <br>

                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'comment'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.comment)}"
                            @click="selectColorSetting('comment')"># This is a comment</span>

                        <br>

                        <span :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.command)}"
                            @click="selectColorSetting('command')">Th</span><span class="fake_cursor"><span
                                style="visibility: hidden">i</span></span><span
                            :class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'autosuggestion'}"
                            :style="{ 'color': interpret_color(selectedColorScheme.autosuggestion)}"
                            @click="selectColorSetting('autosuggestion')">s is an autosuggestion</span>


                        <div style="position: absolute; right: 5px; bottom: 5px;">

                            <button class="customize_theme_button" :class="{button_highlight: customizationActive}"
                                :style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}"
                                @click="toggleCustomizationActive">Customize</button>

                            <button class="save_button"
                                :style="{'color': `#${text_color_for_color(terminalBackgroundColor)}`}"
                                x-show="showSaveButton" @click="setTheme" x-text="saveThemeButtonTitle"></button>
                        </div>

                    </div>

                    <div x-show="customizationActive">
                        <div style="margin: 10px 0 7px 35px;">Choose a color for <span
                                x-text="csUserVisibleTitle"></span>:</div>
                        <!-- TODO maybe add input[type=color] for 24bit terminals -->
                        <table class="colorpicker_term256" style="margin: 0px 20px;">
                            <tbody>
                                <template x-for="color_array in colorArraysArray">
                                    <tr class="colorpicker_term256_row">
                                        <template x-for="color in color_array">
                                            <td class="colorpicker_term256_cell"
                                                :style="{'background-color': interpret_color(color)}"
                                                @click="changeSelectedTextColor(color)">
                                                <div class="colorpicker_term256_selection_indicator"
                                                    x-show="selectedColorScheme[selectedColorSetting] == color"
                                                    :style="{'border-color': interpret_color(border_color_for_color(color))}">
                                                </div>
                                            </td>
                                        </template>
                                    </tr>
                                </template>
                            </tbody>
                            <!-- /ko -->
                        </table>
                    </div>

                    <div style="margin: 10px 0 7px 35px;">Preview a theme below:</div>

                    <div class="color_scheme_choices_scrollview">
                        <div class="color_scheme_choices_list">
                            <template x-for="colorScheme in colorSchemes">
                                <div class="color_scheme_choice_container"
                                    @click="changeSelectedColorScheme(colorScheme)">
                                    <div class="color_scheme_choice_label">
                                        <!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
                                        <span x-text="colorScheme.name"></span>
                                        <a x-show="colorScheme.url" style="text-decoration: none; color: inherit;"
                                            :href="colorScheme.url">&#10138;</a>
                                    </div>
                                    <div class="colorpicker_text_sample_tight"
                                        :style="{'background-color': colorScheme.preferred_background}">
                                        <span
                                            :style="{'color': interpret_color(colorScheme.command)}">/bright/vixens</span>
                                        <span :style="{'color': interpret_color(colorScheme.param)}">jump</span>
                                        <span :style="{'color': interpret_color(colorScheme.end)}">|</span>
                                        <span :style="{'color': interpret_color(colorScheme.command)}">dozy</span>
                                        <span :style="{'color': interpret_color(colorScheme.quote)}"> "fowl" </span>
                                        <span :style="{'color': interpret_color(colorScheme.redirection)}">&gt;
                                            quack</span>
                                        <span :style="{'color': interpret_color(colorScheme.end)}">&</span>
                                        <br>
                                        <span :style="{'color': interpret_color(colorScheme.command)}">echo</span>
                                        <span :style="{'color': interpret_color(colorScheme.error)}">'</span><span
                                            :style="{'color': interpret_color(colorScheme.quote)}">Errors are the
                                            portals to discovery</span>
                                        <br>
                                        <span :style="{'color': interpret_color(colorScheme.comment)}"># This is a
                                            comment</span>
                                        <br>
                                        <span :style="{'color': interpret_color(colorScheme.command)}">Th</span><span
                                            class="fake_cursor"><span style="visibility: hidden">i</span></span><span
                                            :style="{ 'color': interpret_color(colorScheme.autosuggestion)}">s is an
                                            autosuggestion</span>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
            </template>

            <!-- Investigate potential race condition with selectedPrompt (e.g. replace x-if with x-show) -->
            <template x-if="currentTab === 'prompt'" x-data="prompt">
                <div class="height_limiter">
                    <!-- The first 'sample' prompt is the current one; the remainders are samples. This ought to be cleaned up. -->
                    <div class="current_prompt" style="min-height: 7.5em;"
                        :style="{'background-color': terminalBackgroundColor}">
                        <div class="prompt_demo_choice_label" style="color: #FFF;" x-text="selectedPrompt.name"></div>
                        <div style='display: flex'>
                            <div x-html='selectedPrompt.demo' style='flex-grow: 1' class="prompt_demo unbordered"></div>
                            <template x-if="selectedPrompt.right">
                                <div title="right prompt for {{selectedPrompt.name }}" x-html='selectedPrompt.right'
                                    class="prompt_demo unbordered" @click="selectPrompt(selectedPrompt)">
                                </div>
                            </template>
                        </div>
                        <div style="position: absolute; right: 5px; bottom: 5px;">
                            <button class="save_button" x-show="showSaveButton" style="color: #CCC" @click="setPrompt()"
                                x-text="savePromptButtonTitle"></button>
                        </div>
                    </div>
                    <div style="margin: 10px 15px 7px 15px; padding-bottom: 10px; border-bottom: solid 1px #999">Preview
                        a
                        prompt below:</div>
                    <div class="prompt_choices_scrollview">
                        <div class="prompt_choices_list">
                            <template x-for="p in samplePrompts" :key="p.name">
                                <div>
                                    <div class="prompt_demo_choice_label" x-text="p.name"></div>
                                    <template x-if="p.right">
                                        <div style="display: flex;">
                                            <div x-html="p.demo" class="prompt_demo" style="flex-grow: 1"
                                                @click="selectPrompt(p)"></div>
                                            <div title="right prompt for {{p.name}}" x-html="p.right || ''"
                                                class="prompt_demo" @click="selectPrompt(p)"></div>
                                        </div>
                                    </template>
                                    <template x-if="!p.right">
                                        <div x-html="p.demo" class="prompt_demo" @click="selectPrompt(p)">
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>

            <template x-if="currentTab === 'functions'" x-data="functions">
                <div class="function_tab">
                    <div class="function-list">
                        <template x-for="func in functions">
                            <!-- TODO use ul/li -->
                            <div>
                                <div id="master_{{func}}"
                                    :class="{'master_element': true, 'selected_master_elem': func == selectedFunction }"
                                    @click="selectFunction(func)">
                                    <span class="master_element_text" x-text="func"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="function-body">
                        <div class="detail_function" x-html="functionDefinition"></div>
                    </div>
                </div>

            </template>

            <template x-if="currentTab === 'variables'" x-data="variables">
                <div>
                    <div id="table_filter_container">
                        <input id="table_filter_text_box" class="filter_text_box text_box_transient"
                            placeholder="Filter" x-model="query">
                    </div>
                    <table class="data_table">
                        <template x-for="v in filteredVars" :key="v.name">
                            <tr class="data_table_row" tabindex="0" x-data="{ focused: false }"
                                @focusin="focused = true" @focusout="focused = false">
                                <td class="data_table_cell no_overflow" style="text-align: right; padding-right: 30px;"
                                    x-text="v.name"></td>
                                <!-- Small hack to select/unselect variables -->
                                <td :class="{ 'data_table_cell': true, 'no_overflow': !focused }"
                                    style="text-align: left; padding-right: 30px;" x-text="v.value"></td>
                            </tr>
                        </template>
                    </table>
                </div>
            </template>

            <template x-if="currentTab === 'history'" x-data="history">
                <div>
                    <div id="table_filter_container">
                        <table class="paginator">
                            <tr>
                                <td class="prev">
                                    <button type="button" @click="prevPage" :disabled="currentPage == 0">« Prev</button>
                                </td>
                                <td class="desc" x-text="currentPageDescription"></td>
                                <td class="next">
                                    <button type="button" @click="nextPage"
                                        :disabled="(currentPage+1)*itemsPerPage >= filteredItems.length">Next »</button>
                                </td>
                            </tr>

                        </table>

                        <input id="table_filter_text_box" class="filter_text_box text_box_transient"
                            placeholder="Filter" x-model.debounce="query">
                    </div>
                    <table class="data_table">
                        <!-- TODO maybe use history index as keys here? -->
                        <template
                            x-for="item in filteredItems.slice(currentPage * itemsPerPage, (currentPage+1) * itemsPerPage)"
                            :key="item">
                            <tr>
                                <td :class="{'history_text': true, 'no_overflow': selectedItems.indexOf(item) < 0}"
                                    @click="selectItem(item)" x-text="item"></td>
                                <td class="history_delete">
                                    <button type="button" class="delete_button" title="Delete"
                                        @click="deleteHistoryItem(item)">&times;</button>
                                </td>
                            </tr>
                        </template>
                    </table>
                </div>
            </template>


            <template x-if="currentTab === 'bindings'" x-data="bindings"
                x-init="bindings = await (await fetch('bindings/')).json()">
                <div>
                    <div id="table_filter_container">
                        <input id="table_filter_text_box" class="filter_text_box text_box_transient"
                            placeholder="Filter" x-model="query">
                    </div>
                    <table class="data_table">
                        <template x-for="b in filteredBindings" :key="b.command">
                            <tr class="data_table_row" tabindex="0" x-data="{ focused: false }"
                                @focusin="focused = true" @focusout="focused = false">
                                <td :class="{ 'data_table_cell': true, 'no_overflow': !focused }"
                                    style="text-align: right; padding-right: 30px;" x-text="b.command"></td>
                                <!-- Small hack to select/unselect variables -->
                                <td :class="{ 'data_table_cell': true, 'no_overflow': !focused }"
                                    style="text-align: left; padding-right: 30px;">
                                    <template x-for="variety in b.bindings" :key="variety.readable_binding">
                                        <div>
                                            <span x-text="variety.readable_binding"></span>
                                            <template x-for="raw in variety.raw_bindings" :key="raw">
                                                <div class="raw_binding" x-show="focused" x-text="raw"></div>
                                            </template>
                                        </div>
                                    </template>
                                </td>
                            </tr>
                        </template>
                    </table>
                </div>
            </template>
        </div>
    </main>
</body>

</html>
